<template>
	<view class="">
		<!-- border去除下划线 -->
		<u-collapse
		    :border="false"
		>
			 <u-collapse-item 
			   :title="item.chapterName"
			   v-for="item in bizCourseChapters"
			   :key="item.id"
			 >
				<view 
				  class="video-item"
				  v-for="child in item.children"
				  :key="child.id"
				  >
					<view class="video-icon">视频</view>
					<view class="video-title">{{ child.chapterName }}</view>
					<view class="video-lock">
						<u-icon class="lock-icon" name="lock-fill" color="#303133" size="20"></u-icon>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	
	export default {
		props:{
			bizCourseChapters:{
				type:Array,
				default:[]
			}
		}
	}
</script>

<style>
	.video-item {
		display: flex;
		align-items: center;
		width: 100%;
		height: 90rpx;
	}
	.video-icon {
		border: 1px solid #333740;
		font-size: 21rpx;
		font-weight: 400;
		padding: 5rpx;
		border-radius: 5rpx;
	}
	.video-title {
		flex: 1;
		margin-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space:nowrap;
	}
	.video-lock {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>